<template>
  <view>
    <uni-nav-bar dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF" status-bar title="兑换"
      left-icon="left" @clickLeft="back" />
    <view class="differential">
      <view class="differ_text">
        您的DDC
      </view>
      <view class="differ_num">
        {{balance || 0}}
      </view>
    </view>
    <view class="item">
      <view class="itemtext">
        兑换类型
      </view>
      <view class="iteminput">
        <uni-data-select v-model="value" :localdata="range" @change="change" label="应用选择"></uni-data-select>
      </view>
    </view>
    <!--  -->
    <view v-if="value==3" class="giving_num u-flex u-ali-center">
      <view class="iput_label">
        卡油卡号
      </view>
      <input placeholder-style="color:#999999" class="iput_shu" type="text" v-model="cardno" placeholder="请填写卡油卡号">
    </view>
    <!--  -->
    <view v-if="value==3" class="giving_num u-flex u-ali-center">
      <view class="iput_label">
        所属油站
      </view>
      <input placeholder-style="color:#999999" class="iput_shu" type="text" v-model="youzhan"
        placeholder="请填写油卡所属中石油或中石化">
    </view>
    <view v-if="value==3 " class="giving_num u-flex u-ali-center">
      <view class="iput_label">
        兑换数量
      </view>
      <input placeholder-style="color:#999999" class="iput_shu" type="text" v-model="number" placeholder="请填写您要转账的数量">
    </view>
    <view v-if="value==2 || value==3" class="giving_num u-flex u-ali-center" style="margin-top: 20rpx;">
      <view class="iput_label">
        持卡手机
      </view>
      <input placeholder-style="color:#999999" class="iput_shu" type="text" v-model="mobile" placeholder="请填写油卡绑定的手机号">
    </view>
    <view v-if="value==1 || value==2  " class="giving_num u-flex u-ali-center">
      <view class="iput_label">
        充值金额
      </view>
      <input placeholder-style="color:#999999" class="iput_shu" type="text" v-model="number" placeholder="请填写您要转账的数量">
    </view>
    <!-- <view v-if="value==3" class="giving_num u-flex u-ali-center" style="margin-top: 20rpx;">
      <view class="iput_label">
        支付密码
      </view>
      <input placeholder-style="color:#999999" class="iput_shu" type="password" v-model="pass" placeholder="请填写您的支付密码">
    </view> -->
    <view v-if="value==1" class="giv_button" @click="giveSubmit1">
      确认赠送
    </view>
    <view v-if="value==2" class="giv_button" @click="giveSubmit2">
      确认赠送
    </view>
    <view v-if="value==3" class="giv_button" @click="giveSubmit3">
      确认赠送
    </view>
  </view>
</template>

<script>
  import {
    getTransConfig,
    runTrans
  } from '@/api/duihuan/index.js'
  import md5 from '../../utils/md5.js'
  export default {
    data() {
      return {
        balance: '',
        acIndex: 212,
        // 油卡
        cardno: '', //油卡号
        youzhan: '', //所属油站
        mobile: '', //手机号码
        // pass: '', //支付密码
        number: '', //兑换数量

        list: [],
        range: [{
            "value": 1,
            "text": "兑换微分"
          }, //{"value": 1,"text": "兑换微分", "disable": true},
          {
            "value": 2,
            "text": "兑换话费"
          },
          {
            "value": 3,
            "text": "兑换油卡"
          }
        ],
        value: 1
      }
    },
    // watch: {
    //   value(val) {
    //     if(val === 1) {
    //     } else if(val === 2) {
    //     } else if(val === 3) {
    //     }
    //   }
    // },
    onLoad() {
      this.getList()
    },
    methods: {
      change(e) {
        console.log('e:', e);
        this.cardno = '' //油卡号
        this.youzhan = '' //所属油站
        this.mobile = '' //手机号码
        // pass: '', //支付密码
        this.number = '' //兑换数量
      },
      getList() {
        // 调用接口
        getTransConfig({}).then(res => {
          this.list = res.data
          this.list.map(item => {
            item.text = item.name
          })
          console.log('成功获取兑换res=', res)
        }).catch((e) => {})
      },
      back() {
        uni.navigateBack()
      },
      // clickRights() {
      //   console.log('微分赠送');
      // },
      // get_info() {
      //   const vm = this
      //   getEnerygLog({
      //     page: vm.page,
      //     status: vm.acIndex
      //   }).then(res => {
      //     if (res.code === 1) {
      //       vm.balance = res.data.balance
      //     }
      //   })
      // },
      // 1微分提交
      giveSubmit1() {
        this.$ui.show('提示', '确认赠送', true).then(res => {
          if (res.confirm) {
            runTrans({
              type: this.value,
              number: this.number,
            }).then(res => {
              // console.log('成功购买')
              this.$ui.toast(res.msg)
              // this.getList()
            }).catch((e) => {})
          }
        })
      },
      // 2话费提交
      giveSubmit2() {
        this.$ui.show('提示', '确认赠送', true).then(res => {
          if (res.confirm) {
            runTrans({
              type: this.value,
              number: this.number,
              mobile: this.mobile,
            }).then(res => {
              // console.log('成功购买')
              this.$ui.toast(res.msg)
              // this.getList()
            }).catch((e) => {})
          }
        })
      },
      // 3油卡提交
      giveSubmit3() {
        this.$ui.show('提示', '确认赠送', true).then(res => {
          if (res.confirm) {
            runTrans({
              type: this.value,
              number: this.number,
              mobile: this.mobile,
              cardno: this.cardno,
              youzhan: this.youzhan
            }).then(res => {
              // console.log('成功购买')
              this.$ui.toast(res.msg)
              // this.getList()
            }).catch((e) => {})
          }
        })
      },
      // giveSubmit() {
      //   const vm = this
      //   putEnerygTransfer({
      //     mobile: vm.phone,
      //     num: vm.num,
      //     paypass: md5.hex_md5(vm.pass),
      //     type: 2
      //   }).then(res => {
      //     if (res.code === 1) {
      //       vm.$ui.toast(res.msg)
      //       vm.mobile = ''
      //       vm.num = ''
      //       vm.paypass = ''
      //     }else {
      //       vm.$ui.toast(res.msg)
      //     }
      //   })
      // }
    }
  }
</script>
<style lang="scss">
  .uni-stat__select {
    display: flex !important;
    align-items: center !important;
    padding: 0rpx !important;
    cursor: pointer !important;
  }
::v-deep{
  .uni-stat__select {
    display: flex !important;
    align-items: center !important;
    padding: 0rpx !important;
    cursor: pointer !important;
  }
  .uni-select {
    margin-top: 7rpx;
    font-size: 28rpx !important;
    border: none !important;
    border: 1rpx solid rgba(0, 0, 0, 0) !important;
  }
}
  .uni-select, {
    font-size: 28rpx !important;
    border: none !important;
    border: 1rpx solid rgba(0,0,0,0)!important;
  }

  .uni-select__input-text {
    width: 480rpx !important;
    color: #3a3a3a !important;
  }

  .select__input-text.uni-select__input-placeholder {
    margin-left: 10px !important;
  }
</style>
<style lang="less">
  .differential {
    position: relative;
    margin: 45rpx auto 30rpx;
    width: 710rpx;
    height: 290rpx;
    background-image: url(@/static/differential/lottery_bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;

    .differ_text {
      width: 100%;
      font-size: 28rpx;
      line-height: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      text-align: center;
      margin-top: 92rpx;
    }

    .differ_num {
      width: 100%;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #FFD76B;
      text-align: center;
      margin-top: 30rpx;
    }
  }

  .item {
    width: 707rpx;
    height: 78rpx;
    background: #FFFFFF;
    border-radius: 14rpx;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;

    .itemtext {
      flex: 1;
      font-size: 25rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #666666;
      line-height: 78rpx;
      margin-left: 30rpx;
    }

    .iteminput {
      flex: 1;
    }
  }

  // 
  .giving_num {
    margin: 32rpx auto 0rpx;
    padding-left: 22rpx;
    width: 710rpx;
    height: 78rpx;
    background: #FFFFFF;
    border-radius: 14rpx;
    box-sizing: border-box;

    .iput_label {
      font-size: 25rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #666666;
    }

    .iput_shu {
      margin-left: 21rpx;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
    }
  }

  .giv_button {
    margin: 40rpx auto 0;
    width: 710rpx;
    height: 82rpx;
    background: linear-gradient(0deg, #CAAC5D 0%, #E7C573 100%);
    border-radius: 20rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    text-align: center;
    line-height: 82rpx;
  }
</style>
